<template>
  <view>
    <ve-navbar v-bind="$attrs" :title="title" @rightClick="toFilterPage">
      <template #center>
        <slot name="center"></slot>
      </template>
      <template #right>
        <view class="navbar-filter" v-if="props.searchList">
          <ve-icon name="filter" size="36" style="margin-right: 8rpx; margin-top: -6rpx" />
          <text class="text">筛选</text>
          <view class="filter-num" v-if="filterCount">{{ filterCount }}</view>
        </view>
      </template>
    </ve-navbar>
  </view>
</template>

<script setup>
  import { computed } from 'vue'
  import { isValid } from '@/utils'

  const props = defineProps({
    group: Array,
    searchList: Array,
    queryParam: Object,
    title: String,
    resetToInit: {
      type: Boolean,
      default: false,
    },
    // swtich 页面
    swtichPage: Boolean,
  })
  const emits = defineEmits(['confirm', 'update:queryParam', 'rightClick'])

  // 筛选个数
  const filterCount = computed(() => {
    let count = 0
    props.searchList.forEach((it) => {
      if (it.attrs && it.attrs.show == false) return
      let prop = it.prop
      if (prop instanceof Array) {
        if (isValid(props.queryParam[prop[0]]) || isValid(props.queryParam[prop[1]])) {
          count++
        }
      } else {
        let value = props.queryParam[it.prop]
        if (isValid(value)) {
          if (value instanceof Array) {
            if (value.length > 0) {
              count++
            }
          } else {
            count++
          }
        }
      }
    })
    return count
  })

  // 初始值
  const initData = {
    init: false,
    form: {},
    labelForm: {},
  }
  // 上一次的值
  const lastData = {
    form: {},
    labelForm: {},
  }
  // 初始化
  const initDataFn = () => {
    // 防止页面操作queryParam 丢失筛选值，获取最新的queryParam
    lastData.form = { ...props.queryParam }
    if (initData.init) return
    initData.init = true
    // 初始化form 和labelForm
    initData.form = { ...props.queryParam }
    props.searchList.forEach((it) => {
      if (it.attrs && it.attrs.label) {
        initData.labelForm[it.prop] = it.attrs.label
      }
    })
    lastData.form = { ...props.queryParam }
    lastData.labelForm = { ...initData.labelForm }
  }

  const toFilterPage = () => {
    initDataFn()
    uni.navigateTo({
      url: '/pages/utils/moreFilter',
      events: {
        onConfirm: (val, label_form) => {
          lastData.form = { ...val }
          lastData.labelForm = { ...label_form }
          emits('update:queryParam', val)
          emits('confirm', val, label_form)
        },
      },
      success: (res) => {
        // 传递数据
        res.eventChannel.emit('acceptDataFromOpenerPage', {
          ...props,
          initData,
          lastData,
        })
      },
    })
    emits('rightClick')
  }
</script>

<style lang="less" scoped>
  .navbar-filter {
    position: relative;
    .filter-num {
      height: 32rpx;
      line-height: 32rpx;
      padding: 0 8rpx;
      font-size: 24rpx;
      font-weight: 600;
      color: #3072f6;
      text-align: center;
      background: #c6dafb;
      border-radius: 16rpx;
      position: absolute;
      right: -20rpx;
      top: 16rpx;
    }
  }
  .text {
    font-size: 28rpx;
    font-weight: 400;
    color: #1d2129;
    line-height: 40rpx;
  }
</style>
